
<template>
  <div class=" h-60 w-160" >
    <Line v-if="chartData" :key="chartKey" :data="chartData" :options="options"/>
    <div v-else class="flex items-center justify-center h-full">
      加载中...
    </div>
  </div>
</template>
<script setup>
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
} from 'chart.js'
import {Doughnut, Line} from 'vue-chartjs'
import {onMounted, ref} from "vue";
import {getAllAdmin, getAllStudent, getAllTeacher} from "@/hook/userHook.js";
import {getAllScore} from "@/hook/scoreHook.js";
ChartJS.register(
    CategoryScale,
    LinearScale,
    PointElement,
    LineElement,
    Title,
    Tooltip,
    Legend
)


// 使用ref创建响应式数据
const chartData = ref(null);
const chartKey = ref(0); // 用于强制重新渲染
const loading = ref(true);


// 配置项
const options = {
  responsive: true,
  maintainAspectRatio: false,
  plugins: {
    legend: {
      position: 'top',
    },
    tooltip: {
      callbacks: {
        label: function(context) {
          return `${context.label}: ${context.raw}分`;
        }
      }
    }
  }
};

onMounted(async () => {
  let records = (await getAllScore(1,50,'',''))?.records;
  console.log(records);
  let oneR = records.filter(item=>item.courseName==='通信原理');
  let twoR = records.filter(item=>item.courseName==='程控交换技术')
  let threeR = records.filter(item=>item.courseName==='电路分析')
  let aR = records.filter(item=>item.courseName==='移动通讯');
  let bR = records.filter(item=>item.courseName==='计算机组成原理')
  let cR = records.filter(item=>item.courseName==='多媒体信息处理')


  let sum = 0
  oneR?.map(item=>item.score).forEach(item=>sum+=item);
  let one_aveScore = Number( sum ) / Number( oneR?.length) || 0

  sum = 0
  twoR?.map(item=>item.score).forEach(item=>sum+=item);
  let two_aveScore = Number( sum ) / Number( twoR?.length) || 0


  sum = 0
  threeR?.map(item=>item.score).forEach(item=>sum+=item);
  let three_aveScore = Number( sum ) / Number( threeR?.length) || 0


  sum = 0
  aR?.map(item=>item.score).forEach(item=>sum+=item);
  let a_aveScore = Number( sum ) / Number( aR?.length) || 0

  sum = 0
  bR?.map(item=>item.score).forEach(item=>sum+=item);
  let b_aveScore = Number( sum ) / Number( bR?.length) || 0


  sum = 0
  cR?.map(item=>item.score).forEach(item=>sum+=item);
  let c_aveScore = Number( sum ) / Number( cR?.length)


  console.log(one_aveScore,two_aveScore,three_aveScore,a_aveScore,b_aveScore,c_aveScore)

  try {
    // 并行请求提高效率
    const [one,two,three,aa,bb,cc] = await Promise.all([
      one_aveScore,
      two_aveScore,
      three_aveScore,
      a_aveScore,
      b_aveScore,
      c_aveScore,
    ]);

    // 创建新对象确保响应式更新
    chartData.value = {
      labels: ['通信原理', '程控交换技术', '电路分析','移动通讯','计算机组成原理','多媒体信息处理'],
      datasets: [
        {
          label: '各科目平均分',
          backgroundColor: '#f87979',
          data: [
              one,
              two,
              three,
              aa,
              bb,
              cc
          ]
        }
      ]
    }

    // 强制重新渲染图表
    chartKey.value++;
  } catch (error) {
    console.error('数据加载失败:', error);
    // 设置默认数据
    chartData.value = {
      labels: ['通信原理', '程控交换技术', '电路分析','移动通讯','计算机组成原理','多媒体信息处理'],
      datasets: [
        {
          label: '各科目平均分',
          backgroundColor: '#f87979',
          data: [40, 39, 10, 40, 39, 80]
        }
      ]
    }
  } finally {
    loading.value = false;
  }
});


</script>


<style scoped>

</style>